<template>
    <div class="layout-container">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '64px' : '220px'" class="aside">
        <div class="logo-container">
          <img src="../assets/logo.png" alt="StoryPlush" class="logo" />
          <h2 class="title" v-if="!isCollapse">管理后台</h2>
        </div>
        
        <el-scrollbar>
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            :router="true"
            :collapse="isCollapse"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF"
          >
            <el-menu-item index="/dashboard">
              <el-icon><Odometer /></el-icon>
              <template #title>控制台</template>
            </el-menu-item>
            
            <el-menu-item index="/products">
              <el-icon><ShoppingBag /></el-icon>
              <template #title>商品管理</template>
            </el-menu-item>
            
            <el-menu-item index="/orders">
              <el-icon><List /></el-icon>
              <template #title>订单管理</template>
            </el-menu-item>
            
            <el-menu-item index="/users">
              <el-icon><User /></el-icon>
              <template #title>用户管理</template>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      
      <!-- 内容区 -->
      <el-container class="main-container">
        <!-- 头部 -->
        <el-header class="header">
          <div class="header-left">
            <el-icon class="collapse-btn" @click="toggleSidebar">
              <Fold v-if="!isCollapse" />
              <Expand v-else />
            </el-icon>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ currentRoute.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="header-right">
            <el-dropdown trigger="click" @command="handleCommand">
              <div class="avatar-container">
                <el-avatar :size="32" icon="UserFilled" />
                <span class="username">管理员</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">个人信息</el-dropdown-item>
                  <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        
        <!-- 主内容区 -->
        <el-main class="main">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { ElMessageBox } from 'element-plus'
  import { useUserStore } from '../stores/user'
  
  const userStore = useUserStore()
  const route = useRoute()
  const router = useRouter()
  const isCollapse = ref(false)
  
  // 获取当前路由信息
  const currentRoute = computed(() => route)
  
  // 根据路由 meta 信息设置活跃菜单项
  const activeMenu = computed(() => {
    return route.meta.activeMenu || route.path
  })
  
  // 切换侧边栏
  const toggleSidebar = () => {
    isCollapse.value = !isCollapse.value
  }
  
  // 处理下拉菜单命令
  const handleCommand = (command) => {
    if (command === 'logout') {
      ElMessageBox.confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userStore.logout()
        router.push('/login')
      }).catch(() => {})
    } else if (command === 'profile') {
      // 跳转到个人信息页面
      // router.push('/profile')
    }
  }
  </script>
  
  <style scoped>
  .layout-container {
    height: 100vh;
    width: 100vw;
    display: flex;
  }
  
  .aside {
    height: 100%;
    background-color: #304156;
    color: #fff;
    transition: width 0.3s;
    overflow-x: hidden;
  }
  
  .logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px;
    margin-left: 10px;
    justify-content: center;
    overflow: hidden;
  }
  
  .logo {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
  
  .title {
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
  }
  
  .sidebar-menu {
    border-right: none;
  }
  
  .main-container {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .header {
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
  }
  
  .header-left {
    display: flex;
    align-items: center;
  }
  
  .collapse-btn {
    font-size: 20px;
    cursor: pointer;
    margin-right: 15px;
  }
  
  .header-right {
    display: flex;
    align-items: center;
  }
  
  .avatar-container {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  
  .username {
    margin-left: 8px;
    font-size: 14px;
  }
  
  .main {
    background-color: #f0f2f5;
    height: calc(100% - 60px);
    overflow-y: auto;
    padding: 15px;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  </style>